{extend name="default/base/base_home" /}

{block name="mall_main"}
<link rel="stylesheet" href="{$Think.HOME_SITE_ROOT}/css/member_o2o_errand.css">
<style>
    input.border{border: 1px solid #D9D9D9 !important}
    .null{text-align: center;color:#aaa;padding:10px;}
</style>
<script src="{$Think.HOME_SITE_ROOT}/js/bmap.js"></script>
<script src="{$Think.HOME_SITE_ROOT}/js/member_o2o_errand.js"></script>
<form id='member_o2o_errand_form' action='{:url("MemberO2oErrandOrder/add")}'>
    <input type="hidden" name="o2o_errand_order_type" value="0">
    <input type="hidden" name="o2o_errand_order_appointment_time" value="">
    <input type="hidden" name="o2o_errand_order_pickup_phone" value="">
<div class="member_o2o_errand_send">
    <div class="create-content clearfloat">
        <div class="create-left-con">
            <div class="user-mess">
                <div class="user-mess-title clearfloat">
                    <h3 class="fl">门店信息</h3>
                </div>
                <div class="user-mess-con">

                    <div class="user-from-detail clearfloat">
                        <div class="user-trip">
                            详细地址
                        </div>
                        <div class="user-from-input">
                            <input type='hidden' name='o2o_errand_order_pickup_region_id' id='o2o_errand_order_pickup_region_id' value="{$address_send_info.area_id|default=''}" />
                            <input type='hidden' name='o2o_errand_order_pickup_lng' id='o2o_errand_order_pickup_lng' value="{$address_send_info.address_longitude|default=''}" />
                            <input type='hidden' name='o2o_errand_order_pickup_lat' id='o2o_errand_order_pickup_lat' value="{$address_send_info.address_latitude|default=''}" />
                            <input readonly class="cus-input" type="text" placeholder="请输入单元、楼层、门牌号" id='o2o_errand_order_pickup_address' name='o2o_errand_order_pickup_address' value="{$address_send_info.address_detail|default=''}" />
                        </div>
                    </div>
                    <div class="user-goods" style="padding:0">
                    <div class="goods-type clearfloat">
                        <div class="user-trip">
                            门店名称
                            
                        </div>
                        <div class="cus-select user-sel-type f" style="padding-left:0;cursor: pointer">
                        <div>
                            <input class="cus-input" type="text" style="height:100%;width:210px" placeholder="请输入便利店、超市、药房" id='o2o_errand_order_pickup_name' name='o2o_errand_order_pickup_name' value="{$address_send_info.address_realname|default=''}" />
                            <i class="iconfont" onclick="searchAddress()">&#xe65f;</i>
                        </div>
                            <div class="select-weight select-block" id='address_list'>
                                <div class="select-weight-con" id="nearby_list_wrapper">
                                    
                                </div>
                            </div>
                        </div>
                        
                    </div>
                    </div>
                </div>
            </div>
            <div class="user-mess">

                <div class="user-mess-title clearfloat">
                    <h3 class="fl">收件信息</h3>
                    <a class="href-look tar-explanation" href='javascript:getAddress(0)'>设置</a>
                </div>
                <div class="user-mess-con">
                    <div class="user-from-detail clearfloat">
                        <div class="user-trip">
                            详细地址
                        </div>
                        <div class="user-from-input">
                            <input type='hidden' name='o2o_errand_order_deliver_region_id' id='o2o_errand_order_pickup_region_id' value="{$address_receive_info.area_id|default=''}" />
                            <input type='hidden' name='o2o_errand_order_deliver_lng' id='o2o_errand_order_deliver_lng' value="{$address_receive_info.address_longitude|default=''}" />
                            <input type='hidden' name='o2o_errand_order_deliver_lat' id='o2o_errand_order_deliver_lat' value="{$address_receive_info.address_latitude|default=''}" />
                            <input readonly class="cus-input" type="text" placeholder="请输入单元、楼层、门牌号" id='o2o_errand_order_deliver_address' name='o2o_errand_order_deliver_address' value="{$address_receive_info.address_detail|default=''}" />
                        </div>
                    </div>
                    <div class="user-from-mess clearfloat">
                        <div class="user-trip">
                            收件人姓名
                            
                        </div>
                        <div class="user-from-name">
                            <input readonly class="cus-input" type="text" placeholder="请输入姓名" id='o2o_errand_order_deliver_name' name='o2o_errand_order_deliver_name' value="{$address_receive_info.address_realname|default=''}" />
                        </div>
                        <div class="user-trip f-tel">
                            收件人手机号
                            
                        </div>
                        <div class="user-from-name">
                            <input readonly class="cus-input" maxlength="11" type="tel" placeholder="请输入手机号" id='o2o_errand_order_deliver_phone' name='o2o_errand_order_deliver_phone' value="{$address_receive_info.address_mob_phone|default=''}" />
                        </div>
                    </div>
                </div>
            </div>
            <div class="user-mess">
                <div class="user-mess-title">
                    <h3>物品信息</h3>
                </div>
                <div class="user-goods clearfloat">
                    
                    <div class="goods-type clearfloat">
                        <div class="user-trip">
                            商品价格
                            <span>（必填）</span>
                        </div>
                        <div class='cus-select user-sel-type f'>
                            <div class="goods-m type-m select-weight-btn">
                                <input class="cus-input" type="number" style="height:100%" name='o2o_errand_order_goods_price' id='o2o_errand_order_goods_price' value="" /> 
                                <i >元</i>
                            </div>
                        </div>
                       
                    </div>
                   
                    <div class="user-gratuity clearfloat">
                        <div class="user-trip">
                            加小费
                        </div>
                        <div class="user-edit-weight f" style='margin:0'>
                            <div class="weight-subtraction" onclick="changeGratuity('-')">
                                <i class="iconfont">&#xe6dc;</i>
                            </div>
                            <div class="user-weight f">
                                <input type="number" name="o2o_errand_order_gratuity" id="o2o_errand_order_gratuity" maxlength="3" value="0" />
                                <div class="w-unit">
                                    元
                                </div>
                            </div>
                            <div class="weight-add" onclick="changeGratuity('+')">
                                <i class="iconfont">&#xe6db;</i>
                            </div>
                        </div>
                    </div>
                    <div class="user-remark">
                        <div class="user-trip">
                            物品详情
                        </div>
                        <div class="user-remark-con">
                            <textarea name='o2o_errand_order_detail' placeholder="请输入物品详情"></textarea>
                        </div>
                    </div>
                    <div class="user-remark">
                        <div class="user-trip">
                            备注
                        </div>
                        <div class="user-remark-con">
                            <textarea name='o2o_errand_order_remark' placeholder="请输入备注信息" maxlength="150"></textarea>
                            <div class="mark-size" style='display: none'>
                                <span>0</span>/150
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="create-right-con" style="top: 0px;">
            <div class="cal-fee">
                <div class="user-mess-title">
                    <h3>订单费用</h3>
                    <a href="javascript:openCalculDetail()" class="href-look tar-explanation">资费说明</a>
                </div>
                <div id='order_amount_wrapper'></div>
                <div class="pay-style">
                    <div class="l-semicircle"></div>
                    <div class="r-semicircle"></div>
                 
                    <div class="to-submit" onclick='submitForm()'>
                        去支付
                    </div>
                    <div class="sub-agree">
                        点击“去支付”按钮，即表示您同意
                        <a href="{:url('Document/index',['code'=>'o2o_errand'])}" target="_blank">跑腿服务协议</a>
                    </div>
                </div>
                <div class="dowload-app clearfloat">
                    <img src="" class="left-ding" />
                    <img src="" class="right-ding" />
                    <p class="d-title">使用手机下单更方便快捷</p>
                    <div class="d-code">
                        <div class="left-code f">
                            <img src="{$Think.HOME_SITE_URL}/qrcode?url={$Think.config.h5_site_url}" />
                            <p>扫描进入手机端</p>
                        </div>
                        <div class="right-code f">
                            <img src="{$Think.UPLOAD_SITE_URL}/{$Think.ATTACH_COMMON}/{$Think.config.site_logowx}" />
                            <p>关注微信公众号</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
</form>
<script src="{$Think.PLUGINS_SITE_ROOT}/template.min.js"></script>

<script>
        //定位
        var poi=false
        var ds_bmap=new initBmap({BMAP_AK:'{$Think.config.baidu_ak}'})
        ds_bmap.getPosition(function (res) {
        if (res.code === 10000) {
            poi={lat:res.result.lat,lng:res.result.lng}
        } else {
          // 使用ip定位
          ds_bmap.getPointByIp(function(res){
            if (res.status == 0) {
                poi={lat:res.content.point.y,lng:res.content.point.x}
            } else {
              layer.alert(res.message,{title:'错误',icon: 5,})
            }
          })
        }
      }, true)
      
    var layer_index
    var config={
            o2o_errand_distance_price:{:json_encode(unserialize($Think.config.o2o_errand_distance_price))},
            o2o_errand_weight_price:{:json_encode(unserialize($Think.config.o2o_errand_weight_price))},
            o2o_errand_time_price:{:json_encode(unserialize($Think.config.o2o_errand_time_price))},
        }
    $(function(){
        calculAmount()
        $(document).bind('click',
        function(e) {
            var e = e || window.event; //浏览器兼容性 
            var elem = e.target || e.srcElement;
            while (elem) { //循环判断至跟节点，防止点击的是div子元素 
                if (elem.className && (elem.className.indexOf("select-weight-btn") != -1 || elem.className.indexOf("sel-time") != -1)) {
                    return;
                }
                elem = elem.parentNode;
            }
            closeSelect()
            
        })
    })
    function searchAddress(){
        if(!poi){
            layer.msg('还没获取到您的位置')
            return
        }
        var keyword=$('#o2o_errand_order_pickup_name').val()
        if(!keyword){
            layer.msg('请输入门店名称')
            return
        }
        ds_bmap.getPointNearby(poi.lat+','+poi.lng,keyword,function(res){
            if (res.status == 0) {
                $('#nearby_list_wrapper').html(template.render('nearby_list_html', {address_list:res.results}))
                $('#address_list').show()
            } else {
              layer.alert(res.message,{title:'错误',icon: 5,})
            }
        })
    }
    function submitForm(){
        var _form = $("#member_o2o_errand_form");
        $.ajax({
            type: "POST",
            url: _form.attr('action'),
            data: _form.serialize(),
            dataType:"json",
            success: function (res) {
                if(res.code!=10000){
                    layer.msg(res.message)
                }else{
                    window.location.href=HOMESITEURL + "/Buy/o2o_errand_pay?pay_sn=" + res.result.pay_sn
                }
            }
        })
    }
    function openCalculDetail(){
        layer.open({
                    type: 1,
                    title: '资费说明',
                    closeBtn: 0, //不显示关闭按钮
                    shadeClose: true, //开启遮罩关闭
                    content: template.render('calcul_detail_html', {config:config})
                  })
    }
    function calculAmount(){
        
        var lng=$('#o2o_errand_order_pickup_lng').val()
        var lat=$('#o2o_errand_order_pickup_lat').val()
        if(!lng || !lat){
            $('#order_amount_wrapper').html(template.render('order_amount_html',{done:false}))
            return
        }
        var deliver={
            lng:lng,
            lat:lat,
        }
        var lng=$('#o2o_errand_order_deliver_lng').val()
        var lat=$('#o2o_errand_order_deliver_lat').val()
        if(!lng || !lat){
            $('#order_amount_wrapper').html(template.render('order_amount_html',{done:false}))
            return
        }
        
        var receive={
            lng:lng,
            lat:lat,
        }
        var weight=0
        var time
        

           var temp=new Date()
           time=temp.getHours()*60+temp.getMinutes()
        
        var gratuity=parseInt($('#o2o_errand_order_gratuity').val())
        var ret=getTotalAmount(config,deliver,receive,weight,time,gratuity)
        if(!ret.done){
            layer.msg(ret.msg)
        }
        $('#order_amount_wrapper').html(template.render('order_amount_html',ret))
    }
    
    function strPad(num, n) {
        return (Array(n).join(0) + num).slice(-n);
    }

    function changeGratuity(type){
        var i=parseInt($('#o2o_errand_order_gratuity').val())
        if(isNaN(i) || i<0){
            layer.msg('小费设置错误')
            return
        }
        if(type=='-'){
            if(i==0){
                return
            }
            i--
        }else{
            i++
        }
        $('#o2o_errand_order_gratuity').val(i)
        calculAmount()
    }
    function getAddress(type){
        $.getJSON(HOMESITEURL + "/Memberaddress/index?ajax=1&o2o_errand_type=" + type, function (res) {
            if(res.code!=10000){
                layer.msg(res.message)
            }else{
                var data=res.result
                data.type=type
                layer_index=layer.open({
                    type: 1,
                    title: '更换地址',
                    closeBtn: 0, //不显示关闭按钮
                    anim: 2,
                    shadeClose: true, //开启遮罩关闭
                    content: template.render('address_list_html', data)
                  })
            }
        })
    }
    function addAddress(type){
        layer.close(layer_index)
        window.open(HOMESITEURL + "/Memberaddress/add?close=1&from=o2o_errand_send&o2o_errand_type=" + type)
    }
    function selectAddress(type,address){
        if(type){
            $('#o2o_errand_order_pickup_region_id').val(address.area_id)
            $('#o2o_errand_order_pickup_lng').val(address.lng)
            $('#o2o_errand_order_pickup_lat').val(address.lat)
            $('#o2o_errand_order_pickup_name').val(address.name)
            $('#o2o_errand_order_pickup_address').val(address.address)
            $('#o2o_errand_order_pickup_phone').val(address.phone)
        }else{
            $('#o2o_errand_order_deliver_region_id').val(address.area_id)
            $('#o2o_errand_order_deliver_lng').val(address.lng)
            $('#o2o_errand_order_deliver_lat').val(address.lat)
            $('#o2o_errand_order_deliver_name').val(address.name)
            $('#o2o_errand_order_deliver_address').val(address.address)
            $('#o2o_errand_order_deliver_phone').val(address.phone)
        }
        calculAmount()
        layer.close(layer_index)
    }
    function closeSelect(){
        $('i.img-rotate').removeClass('img-rotate')
        $('.select-block').hide()
    }



    
</script>
<script type="text/html" id="calcul_detail_html">
<div class="common-popup-content cacul-wrapper">
    <div class="cacul-title">基础运费</div>
    <div class="cacul-content">
        <%for(var index in config.o2o_errand_distance_price){ var item=config.o2o_errand_distance_price[index];%>
        <div class="cacul-line-wrapper">
            <div class="left"><%=item.title%></div>
            <div class="right"><%=item.content%></div>
        </div>
        <%}%>
    </div>
    <div class="cacul-title">重量附加费</div>
    <div class="cacul-content">
        <%for(var index in config.o2o_errand_weight_price){ var item=config.o2o_errand_weight_price[index];%>
        <div class="cacul-line-wrapper">
            <div class="left"><%=item.title%></div>
            <div class="right"><%=item.content%></div>
        </div>
        <%}%>
    </div>
    <div class="cacul-title">特殊时段费</div>
    <div class="cacul-content">
        <%for(var index in config.o2o_errand_time_price){ var item=config.o2o_errand_time_price[index];%>
        <div class="cacul-line-wrapper">
            <div class="left"><%=item.title%></div>
            <div class="right"><%=item.content%></div>
        </div>
        <%}%>
    </div>

</div>
</script>
<script type="text/html" id="order_amount_html">
<%if(!done){%>    
<div class="cafee-default"> 
    <img src="" /> 
    <p>请完善订单信息</p> 
</div> 
<%}else{%>
<div class="user-fee-detail"> 
    <div class="user-pay clearfloat"> 
        <div class="fee-all"> 
            <span class="pay-trip">基础运费:</span> 
            <span><%=(result.distance_price)%>元</span> 
        </div> 
    </div> 
    <%if(result.weight_price>0){%>
    <div class="user-pay clearfloat"> 
        <div class="fee-all"> 
            <span class="pay-trip">重量附加费:</span> 
            <span><%=(result.weight_price)%>元</span> 
        </div> 
    </div> 
    <%}%>
    <%if(result.time_price>0){%>
    <div class="user-pay clearfloat"> 
        <div class="fee-all"> 
            <span class="pay-trip">特殊时段费:</span> 
            <span><%=(result.time_price)%>元</span> 
        </div> 
    </div> 
    <%}%>
    <%if(result.gratuity>0){%>
    <div class="user-pay clearfloat"> 
        <div class="fee-all"> 
            <span class="pay-trip">小费:</span> 
            <span><%=(result.gratuity)%>元</span> 
        </div> 
    </div> 
    <%}%>
    <div class="user-pay clearfloat"> 
        <div class="fee-all"> 
            <span class="pay-trip">您需支付:</span> 
            <span class="pay-fee"><%=(result.total_price)%>元</span> 
        </div> 
    </div> 
</div>
<%}%>                
</script>
<script type="text/html" id="address_list_html">
<div class="address_list">    
<%for(var i in address_list){ var item=address_list[i];%>    
<div class="address_item" onclick="selectAddress(<%=type%>,{lng:'<%=item.address_longitude%>',lat:'<%=item.address_latitude%>',name:'<%=item.address_realname%>',address:'<%=item.address_detail%>',phone:'<%=item.address_mob_phone%>',area_id:<%=item.area_id%>})">
    <div class="address_title"><span class="address_name"><%=item.address_realname%></span><span class="address_phone"><%=item.address_mob_phone%></span></div>
    <div class="address_content"><%=item.area_info%><%=item.address_detail%></div>
</div>
<%}%>
<div class="to-submit" onclick="addAddress(<%=type%>)">新增</div>
</div>
</script>
<script type="text/html" id="nearby_list_html">
<%if(address_list.length){%>    
<ul>
    <%for(var i in address_list){ var item=address_list[i];%>    
    <li onclick="selectAddress(1,{lng:'<%=item.location.lng%>',lat:'<%=item.location.lat%>',name:'<%=item.name%>',address:'<%=item.address%>',phone:'',area_id:0})">
        <a href="javascript:;"><%=item.name%></a>
    </li>
    <%}%>
</ul>
<%}else{%>
<div class="null">
    没有找到相关门店
</div>
<%}%>
</script>
{/block}